<template>
  <div class="tableDetialIndex">
        <el-tabs v-model="activeName" @tab-click="handleClick"  v-loading="loading">
            <el-tab-pane label="基本信息" name="basicInfo"><table-column-basic-info  v-if="isShowTab" :params="params"/></el-tab-pane>
            <el-tab-pane label="字段信息" name="columnInfo"><table-column-list  v-if="isShowTab" :params="params"/></el-tab-pane>
            <el-tab-pane label="生成信息" name="generateInfo"><table-column-geninfo  v-if="isShowTab" :params="params"/></el-tab-pane>
        </el-tabs>
         <div class="buttons">
                 <el-button type="primary" @click="submitForm()">提交</el-button>
                 <el-button @click="close()">返回</el-button>
        </div>
  </div>
</template>
<script lang="ts">
 
import { Component, Vue,Prop } from 'vue-property-decorator';
import TableColumnList from "@/components/list-create/table-column-detial/table-column-list.vue";
import TableColumnBasicInfo from "@/components/list-create/table-column-detial/table-column-basicinfo.vue";
import TableColumnGeninfo from "@/components/list-create/table-column-detial/table-column-geninfo.vue";
import FormCreateApi from "@/components/list-create/table-code-create-api";
@Component({
  components: {
      TableColumnList,
      TableColumnBasicInfo,
      TableColumnGeninfo
  },
})
export default class TableDetialIndex extends Vue {
    @Prop() params!: any;
     public activeName:any="columnInfo";
     private loading:boolean=false;
     private isShowTab:boolean=false;
     async created(){
           await this.initData();
     }
     private async initData(){
            let tableId=this.params.tableId;
            this.loading=true;
            let resultData=await FormCreateApi.getTableColumnDetial({tableId:tableId});
            let menus=await FormCreateApi.queryMenu();
            let selectOptions=await FormCreateApi.queryOptionselect();
            this.params.menus=menus.data.data;
            this.params.dictOptions=selectOptions.data.data;
            this.params.tableData=resultData.data.data.rows;
            this.params.info=resultData.data.data.info;
            this.loading=false;
            this.isShowTab=true;
     }
     //页签切换
     handleClick(){
        
     }

}
</script>
<style lang="less">
    .tableDetialIndex{
        background-color: #f3f3f4;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs{
            background-color: white;
            height: calc(100% - 60px)!important;
            margin-top: 5px;
            .el-tabs__header{
                margin-left: 5px;
            }
            .el-tabs__content{
                margin-left: 5px;
            }
        }
        .buttons{
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 60px;
        }
    }
</style>
